<template>
	<div>
		<picker
			v-if="Fstate == 'write'"
			mode="date"
			:value="value"
			:start="startDate"
			:end="endDate"
			:fields="fields"
			@change="bindDateChange"
			@cancel="bindDateCancel"
			:disabled="Fstate !== 'write'">
			<view class="uni-input">
				<div>
					{{ format || currentDate || '请选择日期' }}
				</div>
				<div class="icon" v-if="canSelect">
					<uni-icons
						v-if="canSelect"
						type="forward"
						size="18"></uni-icons>
				</div>
			</view>
		</picker>
		<div v-else>
			<div v-if="format">
				{{ format }}
			</div>
			<div v-else>
				{{ currentDate }}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: '',
		components: {},
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			disabled: {
				required: false,
			},
			format: {
				required: false,
			},
			fields: {
				required: false,
				default: 'day',
			},
			start: {
				required: false,
			},
			end: {
				required: false,
			},
			// 显示在输入框中的格式
			formatLabel: {
				default: 'YYYY-MM-DD',
			},
			valueFormat: {
				default: 'YYYY-MM-DD HH:mm:ss',
			},
		},
		data() {
			return {
				index: [0],
				current: undefined,
				dictList: [],
				filterDictList: [],
				show: false,
				searchText: undefined,
			};
		},
		computed: {
			Fstate() {
				return this.state;
			},
			currentDate() {
				return this.A_formatTime(this.vlaue, this.formatLabel);
			},
			canSelect() {
				return (
					(this.state == 'write' || this.Empty(this.state)) &&
					this.disabled != true
				);
			},
		},
		created() {},
		watch: {},
		mounted() {},
		methods: {
			bindDateChange(e) {
				let value = e.detail.value;
				this.$emit('input', this.A_formatTime(value, this.valueFormat));
				this.$emit(
					'change',
					this.A_formatTime(value, this.valueFormat),
				);
			},
			bindDateCancel() {
				this.$emit('cancel');
			},
		},
	};
</script>

<style lang="scss" scoped>
	.uni-input {
		// margin-left: 10rpx;
		min-height: 32px;
		display: flex;
		justify-content: space-between;
	}
	.container {
		padding: 20rpx 20rpx 0 20rpx;
		.topContainer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.search {
				flex: 1;
			}
		}
		.options {
			display: flex;
			flex-direction: column;
			gap: 0 20rpx;
			.item {
				text-align: center;
			}
			.picker-view {
				width: 750rpx;
				height: 400rpx;
				margin-top: 20rpx;
			}
		}
	}
	.disabled {
		color: #606266;
	}
</style>
